<template>
    <div>
        <van-nav-bar
  title="详情页"
  left-text="返回"
  left-arrow
  @click-left="()=>{$router.push('/goods')}"
/>
        <!-- 空状态 -->
        <van-empty v-if="!store.carts.length"
            image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="购物车空空如也">
            <router-link to="/goods">快去加购吧</router-link>
        </van-empty>
        <!-- 购物车布局 -->
        <div v-else>
            <van-swipe-cell v-for="item in store.carts">
                <van-card>
                    <template #thumb>
                        <div style="width: 110px;display: flex;justify-content: space-around;">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <van-image width="80" height="80" :src="item.goods.goods_big_logo" />
                        </div>
                    </template>
                    <template #title>
                        <div style="font-size: 14px;margin-left: 20px;">{{ item.goods.goods_name }}</div>
                    </template>
                    <template #price>
                        <div style="color: red;margin-left: 15px;">
                            {{ item.goods.goods_price}}
                        </div>                       
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" />
                    </template>
                </van-card>
                <template #right>
                    <van-button @click="deletes(item.id)" square text="删除" type="danger" class="delete-button" style="height: 100px;"/>
                </template>
            </van-swipe-cell>
        </div>
    </div>
    <van-submit-bar :price="allprice*100" button-text="去结算" @submit="onSubmit">
  <van-checkbox v-model="selectall">全选</van-checkbox>
  <template #tip>
    <span @click="onClickLink">修改地址</span>
  </template>
</van-submit-bar>

</template>

<script setup>
import { computed, ref } from 'vue';
import {createApi} from '../../request/api'
import { useCounterStore } from '../../store/storeCart'
import { showToast } from 'vant';
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
import {useRouter} from 'vue-router'
const router=new useRouter()
//删除
const deletes=(id)=>{
    store.delcart(id)
}
//全选
const selectall=computed({
    get(){
        return store.carts.every(item=>item.checked)
    },
    set(val){
        return store.carts.forEach(item=>item.checked=val)
    }
})
//总价格
const allprice=computed(()=>{
    let checkeds=store.carts.filter(item=>item.checked)
    let allprice=0
    checkeds.map(item=>{
        allprice+=item.number*item.goods.goods_price
    })
    return allprice
})
//生成订单
const onSubmit=()=>{
    let checkeds=store.carts.filter(item=>item.checked)
    if(!checkeds.length){
        showToast({
            type:'fail',
            message:'还没有选中的商品',
            duration:1500,
        })
    }else{
        createApi({
            goodsIds:checkeds.map(item=>item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:checkeds[0].goods.goods_name+'等'+checkeds.length+'件商品',
            totalPrice:allprice.value,
            nums:checkeds.map(item=>item.number).join(',')
        }).then(res=>{
            console.log('生成订单',res)
            if(res.data.code==0){
                showToast({
                    type:'success',
                    message:'订单生成成功',
                    duration:1500,
                    onClose(){
                        router.push('/home/order/'+res.data.data.orderId)
                    }
                })
            }
        })
    }
}
</script>

<style lang="scss" scoped></style>